<!--
 * @Description: 救援单查询--明细页面
 * @Autor: 刘诗文
 * @Date: 2020-11-19 14:58:29
 * @LastEditors: 刘诗文
 * @LastEditTime: 2021-01-08 10:16:57
-->
<template>
  <div>
    <div class="wrapper">
      <Anchor :labelList="labels" :labelWidth="100">
        <div>
          <FormPanel ref="formPanel" :list="formList" :cols="3" :labelWidth="130" :isSubmitBtn="false" />
        </div>
        <div>
          <FilterTable
            ref="table"
            selectionType="single"
            :columns="columns"
            columnsRef="addRescuePanellsw"
            :dataSource="tableList"
            :onColumnsChange="columns => (this.columns = columns)"
            :onSyncTableData="tableHandle"
          >
          </FilterTable>
        </div>
      </Anchor>
    </div>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { getProvince, getCitys, getDistrict, getRegion } from '@/api/customerRepair/customerInfo/ownerVehicleManagement';
import { getUserListSelect } from '@/api/customerRepair/rescueManagement/rescueOrder';
import { isFormEmpty, notifyAction, findTableItem } from '@/utils';

export default {
  name: 'rescueOrderQueryPanel',
  mixins: [dictionary],
  props: {
    formData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      labels: this.createAnchorLabels(),
      formList: this.createFromList(),
      columns: this.createTableColumns(),
      tableList: []
    };
  },
  mounted() {
    this.formList.forEach(x => {
      x.initialValue = this.formData[x.fieldName];
    });
    this.tableList = this.formData.itemList;
    this.getRegion();
    // 获取处理人
    this.getHandler();
  },
  methods: {
    createAnchorLabels() {
      return [
        { title: '救援信息', id: '救援信息' },
        { title: '救援确认信息', id: '救援确认信息' }
      ];
    },
    createFromList() {
      return [
        {
          type: 'BREAK_SPACE',
          label: '救援信息'
        },
        {
          type: 'INPUT',
          label: '经销商代码',
          fieldName: 'OWNER_CODE',
          disabled: true,
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '经销商名称',
          fieldName: 'dealerName',
          disabled: true,
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '来电人',
          fieldName: 'ownerName',
          disabled: true,
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '来电人电话',
          fieldName: 'ownerMobile',
          disabled: true,
          initialValue: ''
        },
        {
          type: 'SELECT',
          label: '来电人性别',
          fieldName: 'gender',
          disabled: true,
          initialValue: '',
          itemList: this.createDictList(8012)
        },
        {
          type: 'SELECT',
          label: '客户类型',
          fieldName: 'ownerProperty',
          disabled: true,
          initialValue: '',
          itemList: this.createDictList(8011)
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          disabled: true,
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license',
          disabled: true,
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '当前里程',
          fieldName: 'mileage',
          disabled: true,
          initialValue: ''
        },
        {
          type: 'SELECT',
          label: '派单方式',
          fieldName: 'dataSources',
          disabled: true,
          itemList: this.createDictList(1045, [10451003])
        },
        {
          type: 'SELECT',
          label: '紧急程度',
          fieldName: 'rescueLevel',
          disabled: true,
          initialValue: '',
          itemList: this.createDictList(1230)
        },
        {
          type: 'SELECT',
          label: '请求分类',
          fieldName: 'a12',
          disabled: true,
          initialValue: '',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '服务类型',
          fieldName: 'rescueMode',
          disabled: true,
          initialValue: '',
          itemList: this.createDictList(1220)
        },
        {
          type: 'SELECT',
          label: '救援子类',
          fieldName: 'rescueModeTwo',
          disabled: true,
          initialValue: '',
          itemList: this.createDictList(1221)
        },
        {
          type: 'SELECT',
          label: '救援三级子类',
          fieldName: 'rescueModeThree',
          disabled: true,
          initialValue: '',
          itemList: this.createDictList(1222)
        },
        {
          type: 'SELECT',
          label: '省',
          fieldName: 'rescueProvince',
          disabled: true,
          itemList: []
        },
        {
          type: 'SELECT',
          label: '市',
          fieldName: 'rescueCity',
          disabled: true,
          itemList: []
        },
        {
          type: 'SELECT',
          label: '区县',
          fieldName: 'rescueArea',
          disabled: true,
          itemList: []
        },
        {
          type: 'INPUT',
          label: '详细地址',
          fieldName: 'rescueAddr',
          disabled: true,
          initialValue: '',
          selfCols: 3
        },
        {
          type: 'TEXT_AREA',
          label: '反映内容',
          fieldName: 'reactContent',
          disabled: true,
          initialValue: '',
          selfCols: 3
        },
        {
          type: 'TEXT_AREA',
          label: '回复内容',
          fieldName: 'replyContent',
          disabled: true,
          initialValue: '',
          selfCols: 3
        },
        {
          type: 'BREAK_SPACE',
          label: '救援确认信息'
        }
        // {
        //   type: 'DATE',
        //   label: '预计到达时间',
        //   fieldName: 'a21',
        //   disabled: true,
        //   initialValue: ''
        // },
        // {
        //   type: 'INPUT',
        //   label: '外出技师',
        //   fieldName: 'a22',
        //   disabled: true,
        //   initialValue: ''
        // },
        // {
        //   type: 'INPUT',
        //   label: '技师电话',
        //   fieldName: 'a23',
        //   disabled: true,
        //   initialValue: ''
        // }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '是否接受救援',
          dataIndex: 'isRescue',
          showOverFlowToolTip: true,
          editType: 'select',
          editable: true,
          editItems: this.createDictList(1004),
          defaultEditable: true,
          editRequired: true
        },
        {
          title: '救援方式',
          dataIndex: 'rescueType',
          editType: 'select',
          editable: true,
          editItems: this.createDictList(1222),
          defaultEditable: true
        },
        {
          title: '预计到达时间',
          dataIndex: 'appointmentDate',
          showOverFlowToolTip: true,
          dataFormat: 'yyyy-MM-dd HH:mm:ss',
          editType: 'date-picker',
          editable: true,
          defaultEditable: true
          // render: props => {
          //   return moment().format('YYYY-MM-DD HH:mm:ss');
          // }
        },
        {
          title: '处理时间',
          dataIndex: 'dealDate',
          showOverFlowToolTip: true,
          dataFormat: 'yyyy-MM-dd HH:mm:ss'
          // render: props => {
          //   return moment().format('YYYY-MM-DD HH:mm:ss');
          // }
        },
        {
          title: '处理人',
          dataIndex: 'dealPerson',
          showOverFlowToolTip: true,
          sorter: true,
          editType: 'select',
          editable: true,
          editItems: [],
          defaultEditable: true,
          dictItems: []
        },
        {
          title: '处理人联系方式',
          dataIndex: 'dealPersonMobile',
          showOverFlowToolTip: true,
          editable: true,
          maxlength: 200
        },
        {
          title: '处理结果',
          dataIndex: 'dealResult',
          showOverFlowToolTip: true,
          editable: true,
          maxlength: 200
        },
        {
          title: '备注',
          dataIndex: 'remakrs',
          showOverFlowToolTip: true,
          editable: true,
          maxlength: 200
        }
      ];
    },
    // table动态回调函数
    tableHandle(val, isFirst) {
      // debugger;
      this.tableList = val;
      if (isFirst && this.$refs.table) {
        for (let i = 0; i < val.length; i++) {
          this.$nextTick(() => {
            this.$refs.table.SET_CELL_UNEDITABLE(val[i], 'isRescue', true);
            this.$refs.table.SET_CELL_UNEDITABLE(val[i], 'rescueType', true);
            this.$refs.table.SET_CELL_UNEDITABLE(val[i], 'appointmentDate', true);
            this.$refs.table.SET_CELL_UNEDITABLE(val[i], 'dealDate', true);
            this.$refs.table.SET_CELL_UNEDITABLE(val[i], 'dealPerson', true);
            this.$refs.table.SET_CELL_UNEDITABLE(val[i], 'dealPersonMobile', true);
            this.$refs.table.SET_CELL_UNEDITABLE(val[i], 'dealResult', true);
            this.$refs.table.SET_CELL_UNEDITABLE(val[i], 'remakrs', true);
          });
        }
      }
    },
    // 获取省市
    async getRegion() {
      const allRegion = await getRegion();
      this.formList.find(x => x.fieldName === 'rescueProvince').itemList = this.formList.find(item => item.fieldName === 'rescueCity').itemList = allRegion.data.map(x => ({
        value: x.regionId + '',
        text: x.regionName
      }));
    },
    //获取处理人
    async getHandler() {
      const res = await getUserListSelect();
      if (res.resultCode === 200) {
        if (res.errMsg) {
          notifyAction(res.errMsg, 'warning');
        } else {
          this.columns.find(x => x.dataIndex === 'dealPerson').editItems = findTableItem(this.columns, 'dealPerson').dictItems = res.data.map(x => ({
            value: x.userId + '',
            text: x.employeeName
          }));
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.wrapper {
  height: calc(100vh - 135px);
}
</style>
